<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%" @row-click="rowClick" size="small">
      <el-table-column align="center" label="序号" width="80">
        <template v-slot="scope">
          {{ (pageInfo.page - 1) * 10 + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="姓名" width="150" />
      <el-table-column prop="plateNo" label="车牌号码" width="150" />
      <el-table-column prop="crossDate" label="出入时间" width="180" />
      <el-table-column prop="entranceName" label="入厂位置" />
    </el-table>
    <el-pagination
      size="small"
      background
      layout="prev, pager, next,total"
      :total="total"
      class="mt-4"
      @current-change="handleCurrentChange"
    />
    <el-dialog v-model="dialogTableVisible" :title="dialogTitle">
      <VehicleAttendLocus :plateNo="plateNo" :crossDate="crossDate" />
    </el-dialog>
  </div>
</template>
<script>
import sppApi from '@/api/spp'
import VehicleAttendLocus from './vehicleattendLocus.vue'

export default {
  name: 'VehicleattendList',
  components: { VehicleAttendLocus },
  props: {
    vehicleData: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    vehicleData(newValue) {
      Object.assign(this.pageInfo, newValue)

      this.initLoadData()
    }
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageInfo: {
        page: 1,
        regdoorSta: 0,
        orderJson: '[{ column: "cross_date", type: "desc" }]'
      },
      dialogTableVisible: false,
      plateNo: '',
      crossDate: '',
      dialogTitle: '人员轨迹信息'
    }
  },
  mounted() {
    this.initLoadData()
  },
  methods: {
    initLoadData() {
      sppApi.getVehicleattendList().then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val
      this.initLoadData()
    },
    subString2(str) {
      str = str + '000'
      return str.substring(0, 10)
    },
    rowClick(row) {
      this.dialogTableVisible = true
      this.plateNo = row.plateNo
      this.crossDate = this.subString2(row.crossDate)
      this.dialogTitle = row.plateNo + '轨迹信息'
    }
  }
}
</script>
